<script lang="ts" setup>
import "@/utils/rem"
import { ref, reactive } from "vue"
import { getMsg } from "@/api/hr"
import { useRouter } from "vue-router"

// import { formatDateTime } from "@/utils"
// import { showToast } from "vant"
const router = useRouter()
const counts = ref<any>(0)
const list = ref<any>([])
const loading = ref(false)
const finished = ref(false)
const keyWord = ref("")
const BASEURL = `${import.meta.env.VITE_BASE_API}/image/`
const page = ref<any>(1)
const size = ref<any>(10)
const refreshing = ref(false)
const searchData = reactive<any>({
  phone: "",
  works: ""
})
const onLoad = async () => {
  await getMsg({
    page: page.value,
    size: size.value,
    name: keyWord.value,
    works: searchData.works,
    phone: searchData.phone
  })
    .then((res: any) => {
      if (res.code == 200) {
        if (refreshing.value) {
          list.value = []
          refreshing.value = false
        }
        list.value.push(...res.data.list)
        counts.value = res.data.total
        document.title = "简历列表"
        showRight.value = false
      }
    })
    .catch(() => {
      list.value = []
    })
  loading.value = false

  if (list.value.length >= counts.value) {
    finished.value = true
    console.log(counts.value, list.value.length)
  } else {
    page.value++
  }
}
const onRefresh = () => {
  // 清空列表数据
  finished.value = false
  page.value = 1
  searchData.works = ""
  searchData.phone = ""
  keyWord.value = ""
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  onLoad()
}
const goCreateOrder = (item: any) => {
  router.push(`/hr/details?uid=${item.id}&verification=remark`)
}
/**END */
defineOptions({
  name: "OrderSearch"
})
//运营商筛选
const searchCombo = (val: any) => {
  list.value = []
  page.value = 1

  // console.log(val)
  keyWord.value = val
  onLoad()
}
// 手机号 岗位筛选
const showRight = ref<any>(false)
/**面试岗位i */
const columnsG = [
  { text: "质检", value: "质检" },
  { text: "维系", value: "维系" },
  { text: "售前", value: "售前" },
  { text: "售后", value: "售后" },
  { text: "商务", value: "商务" },
  { text: "文员", value: "文员" },
  { text: "话务员", value: "话务员" },
  { text: "打字客服", value: "打字客服" },
  { text: "图文编辑", value: "图文编辑" },
  { text: "视频剪辑", value: "视频剪辑" },
  { text: "带货主播", value: "带货主播" },
  { text: "电商运营", value: "电商运营" },
  { text: "新媒体运营", value: "新媒体运营" },
  { text: "数据分析", value: "数据分析" },
  { text: "前端开发 ", value: "前端开发" },
  { text: "后端开发", value: "后端开发" },
  { text: "财务专员", value: "财务专员" },
  { text: "财务助理", value: "财务助理" },
  { text: "总经理助理", value: "总经理助理" },
  { text: "管培生", value: "管培生" }
]
const pickerValueG = ref<any>([])
const showPickerG = ref(false)
const onConfirmG = ({ selectedValues, selectedOptions }: { selectedValues: any[]; selectedOptions: any[] }) => {
  searchData.works = selectedOptions[0]?.text
  pickerValueG.value = selectedValues
  showPickerG.value = false
}
const onClickButton = () => {
  showRight.value = true
}
const onSubmit = () => {
  page.value = 1
  list.value = []
  onLoad()
}
/**密码验证 */
const pw = ref<any>("")
const showlay = ref<any>(sessionStorage.getItem("dcyz"))
const onSubmit1 = () => {
  sessionStorage.setItem("dcyz", pw.value)
  location.reload()
}
</script>
<template>
  <div style="background-color: #f9faff; width: 7.5rem; margin: 0 auto" ref="root">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="tabs-box" style="min-height: 100vh" v-if="showlay === 'dc6688..'">
        <van-search
          v-model="keyWord"
          shape="round"
          background="#fff"
          placeholder="请输入搜索关键词（姓名)"
          @search="searchCombo"
          show-action
        >
          <template #action>
            <div @click="onClickButton">筛选</div>
          </template>
        </van-search>
        <van-popup v-model:show="showRight" position="right" :style="{ width: '80%', height: '100%' }">
          <van-form @submit="onSubmit">
            <van-cell-group inset style="padding-bottom: 1rem">
              <van-field label-align="top" v-model="searchData.phone" name="手机号" label="手机号" size="small" />
              <van-field
                readonly
                is-link
                label-align="top"
                v-model="searchData.works"
                name="面试岗位"
                label="面试岗位"
                size="small"
                placeholder="请选择"
                @click="showPickerG = true"
              />
              <van-popup v-model:show="showPickerG" destroy-on-close position="bottom">
                <van-picker
                  :columns="columnsG"
                  :model-value="pickerValueG"
                  @confirm="onConfirmG"
                  @cancel="showPickerG = false"
                />
              </van-popup>
            </van-cell-group>
            <van-button style="position: fixed; bottom: 0; border-radius: 0" type="primary" block native-type="submit"
              >提交</van-button
            >
          </van-form>
        </van-popup>
        <div class="list">
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item in list" :key="item.id" style="margin-bottom: 0.2rem">
              <van-card :title="item.name" :centered="false" @click="goCreateOrder(item)">
                <template #desc>
                  <div class="van-ellipsis" style="font-size: 14px">
                    {{ item.age }}
                    {{ item.education || "" }}
                    {{ item.hopeSalary || "" }}
                    {{ item.phone }}
                  </div>
                  <div class="van-ellipsis" style="padding: 0.2rem 0; font-size: 14px">面试岗位：{{ item.works }}</div>
                  <div class="van-ellipsis" style="font-size: 14px">
                    毕业学校：{{ item.schoolName }} {{ item.specialty }}
                  </div>
                </template>
                <template #thumb>
                  <el-image
                    class="box-img"
                    fit="cover"
                    v-if="!item.img && item.sex === '女'"
                    src="http://fansitexitong.cn/images/gril.png"
                    alt=""
                  />
                  <el-image
                    class="box-img"
                    fit="cover"
                    v-else-if="!item.img && item.sex === '男'"
                    src="http://fansitexitong.cn/images/boy.png"
                    alt=""
                  />
                  <el-image
                    class="box-img"
                    fit="cover"
                    v-else
                    style="width: 2.2rem; height: 2.4rem"
                    :src="`${BASEURL}${item.img}`"
                    alt=""
                  />
                </template>
              </van-card>
            </van-cell>
          </van-list>
        </div>
      </div>
    </van-pull-refresh>
    <van-overlay :show="showlay !== 'dc6688..'">
      <div class="wrapper" @click.stop>
        <van-form @submit="onSubmit1" style="width: 80%">
          <van-field
            label-align="top"
            type="password"
            v-model="pw"
            size="small"
            required
            placeholder="为确保简历档案安全请输入管理密码"
          />
          <van-button
            style="position: fixed; bottom: 0; left: 50%; margin-left: -3.75rem; border-radius: 0; width: 7.5rem"
            type="primary"
            block
            native-type="submit"
            >提交</van-button
          >
        </van-form>
      </div>
    </van-overlay>
  </div>
</template>
<style lang="scss" scoped>
.title {
  background-color: #fff;

  box-sizing: border-box;
}
.list {
  padding: 0.2rem;
}
.notice-swipe {
  width: 1.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
}
:deep(.van-card__content) {
  text-align: left !important;
}
:deep(.van-card) {
  background-color: #fff !important;
}
:deep(.van-cell) {
  border-radius: 0.2rem;
}
.tagY {
  background: linear-gradient(137deg, #fa9d5d, #ff3162);
  border-radius: 2px;
  color: #fff;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
  margin-right: 10px;
  padding: 3px 7px;
  z-index: 9;
}
:deep(.van-card__thumb) {
  width: 2.2rem !important;
  height: 2.4rem !important;
}
:deep(.van-card__bottom) {
  text-align: right;
}

:deep(.van-card__desc) {
  color: #000;
  vertical-align: middle;
  font-size: 14px;
}
:deep(.van-card__title) {
  color: #000;
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 0.2rem;
}
:deep(.van-card__content) {
  padding-top: 6px;
}
.box-img {
  width: 2.2rem;
  height: 2.4rem;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
:deep(.van-overlay) {
  background-color: rgba(0, 0, 0, 0.9);
}
</style>
